<!--  -->
<template>
  <div class="login-view">
    <div class="title">江山市投资项目全周期管理 "e键通" 系统</div>
    <div class="login">
      <div class="left"></div>
      <div class="right">
        <div class="r-bg"></div>
        <div class="content">
          <div class="title">
            <span>{{ loginType == 0 ? "账号登录" : "扫码登录" }}</span>
          </div>
          <div class="fixed">
            <div class="type-tips">
              <span>{{ loginType == 0 ? "扫码登录更安全" : "账号登录更方便" }}</span>
              <span></span>
            </div>
            <div class="type-icon" @click="loginType = !loginType">
              <i
                :class="loginType == 0 ? 'icon-erweima' : 'icon-shoujishumadiannao'"
              ></i>
              <div></div>
            </div>
          </div>
          <!-- 账号密码登录 -->
          <div v-if="!loginType">
            <el-form :model="formData" :rules="rules" ref="form">
              <el-form-item prop="username">
                <el-input 
                  v-model="formData.username" 
                  placeholder="用户名" clearable>
                  <span slot="prefix" class="el-input__icon">
                    <i class="icon-jurassic_user icon1"></i>
                  </span>
                </el-input>
              </el-form-item>
              <el-form-item label prop="password">
                <el-input
                  v-model="formData.password"
                  placeholder="密码"
                  show-password
                >
                <span slot="prefix" class="el-input__icon">
                  <i class="icon-mima icon1"></i>
                </span>
                </el-input>
              </el-form-item>
              <el-form-item label class="captcha" prop="captcha">
                <el-input 
                  v-model="formData.captcha" 
                  placeholder="请输入验证码" clearable>
                  <span slot="prefix" class="el-input__icon">
                    <i class="icon-yanzhengma icon1"></i>
                  </span>
                </el-input>
                <div ref="captcha"></div>
              </el-form-item>
              <el-button type="primary" style="width:100%" @click="submitForm">登 录</el-button>
            </el-form>
          </div>
          <!-- 扫码登录 -->
          <div class="pwd" v-if="loginType">
            <div style="margin:0 auto">
              <img src alt />
            </div>
            <div class="con">
              <div class="icon-saoma icon"></div>
              <div class="con-right">
                <p>
                  打开
                  <span class="blue">浙政钉APP</span> 
                </p>
                <p>扫一扫登录</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <img src="@/assets/images/huizhang.png" alt/>
      <p>主办 : 江山市发改局重点建设项目管理中心</p>
      <p>技术支持 : 杭州畅利科技有限公司</p>
    </div>
  </div>
</template>

<script>
// import {Captcha,Login} from '@/api/login';
export default {
  components: {},
  data() {
    return {
      loginType: 0,
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ]
      },
      formData: {
        username: "",
        password: "",
        captcha: "",
        client: ""
      }
    };
  },

  computed: {},

  watch: {},

  methods: {
    submitForm(){
        this.$router.push({
          name:"confirm",
          path:"/confirm"
        })
    },
    // submitForm(){
    //     this.$refs.form.validate((valid) => {
    //       if (valid) {
    //         Login(this.formData).then(res=>{
    //           if(res.data.status=='success'){
    //             localStorage.setItem("token",res.data.data)
    //             this.$router.push({
    //               name:"confirm",
    //               path:"/confirm"
    //             })
    //           }else{
    //             alert(res.data.msg);
    //           }
    //         })
    //       } else {
    //         console.log('error submit!!');
    //         return false;
    //       }
    //   })
    // },
    // requestCaptcha(){
    //   Captcha().then(res=>{
    //     if(res.data.status == 'success'){
    //       this.$refs.captcha.innerHTML=res.data.data.captcha;
    //       this.formData.client=res.data.data.client;
    //     }
    //   })
    // }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    // this.requestCaptcha();
},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
@import url("@/assets/icons/iconfont.css");
.login-view {
  // width: 100vw;
  height: 100vh;
  position: relative;
  padding-top: 80px;
  background: url("@/assets/images/bg.jpg") no-repeat center;
  background-size: 100%;
  box-sizing: border-box;
  .title {
    text-align: center;
    // margin-top: 90px;
    color: #fff;
    font-size: 34px;
    letter-spacing: 10px;
  }
  .login {
    width: 70%;
    height: 500px;
    background-color: #f6f6f6;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    .left {
      width: 55%;
      height: 100%;
      border-right: 1px solid #e1e1e1;
      background: url("@/assets/images/2.png") no-repeat center;
      background-size: 80%;
    }
    .right {
      width: 40%;
      height: 100%;
      position: relative;
      .r-bg {
        width: 67%;
        height: 15%;
        position: absolute;
        bottom: 60px;
        left: 38px;
        background: url("@/assets/images/r-bg.png") no-repeat;
        background-size: 100%;
        z-index: 1;
      }
      .content {
        background-color: #fff;
        width: 80%;
        height: 82%;
        margin: 30px 85px;
        z-index: 88;
        position: absolute;
        box-sizing: border-box;
        .title {
          color: #158dec;
          font-size: 22px;
          text-align: center;
          margin-top: 66px;
          font-weight: bold;
        }
        .fixed {
          position: absolute;
          top: 8px;
          right: 10px;
          display: flex;
          align-items: center;
          .type-tips {
            span {
              &:nth-child(1) {
                display: inline-block;
                box-sizing: border-box;
                padding: 7px 10px;
                font-size: 12px !important;
                color: #000;
                font-weight: 600;
                border-radius: 3px;
                background: url("@/assets/images/login1.png") no-repeat bottom;
                background-size: contain;
              }
              &:nth-child(2) {
                display: inline-block;
                width: 0;
                height: 0;
                border: 6px solid transparent;
                // border-left: 10px solid $colorBlue;
              }
            }
          }
          .type-icon {
            height: 100%;
            position: relative;
            cursor: pointer;
            &:hover {
              > div {
                top: 30px;
                left: -50px;
              }
            }
            > i {
              font-size: 24px;
              color: #000;
            }
            > div {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: linear-gradient(-135deg, transparent 20px, #fff 0);
            }
          }
        }
        .el-form {
          margin: 40px;
          .icon1{
            color: #158dec;
            font-size: 18px;
          }
          .captcha {
            /deep/ .el-form-item__content {
              display: flex;
              svg {
                width: 120px;
                height: 40px;
                margin-left: 20px;
              }
            }
          }
        }
        .pwd {
          margin: 0 auto;
          margin-top: 20px;
          // background-color: palegreen;
          img {
            width: 180px;
            height: 180px;
            background-color: pink;
            margin-left: 28%;
          }
          .con {
            margin-top: 10px;
            display: flex;
            justify-content: center;
            font-size: 14px;
            .icon {
              font-size: 36px;
              vertical-align: middle;
              margin-right: 14px;
              margin-left: 17px;
            }
            .blue {
              color: #158dec;
            }
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: #2997ee;
    display: flex;
    color: #fff;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    line-height: 50px;
    img {
      width: 22px;
      height: 22px;
      margin-left: 38%;
      margin-right: 10px;
      margin-top: 16px;
      vertical-align: middle;
    }
    p{
      margin-right: 15px;
    }
  }
}
</style>